<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>H+ 后台主题UI框架 - 基本表单</title>
<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
<meta name="description"
	content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

<link rel="shortcut icon" href="favicon.ico">
<link href="${ctx}/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="${ctx}/css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="${ctx}/css/plugins/iCheck/custom.css" rel="stylesheet">
<link href="${ctx}/css/animate.css" rel="stylesheet">
<link href="${ctx}/css/style.css?v=4.1.0" rel="stylesheet">

<!--引入webuploaderCSS-->
<link rel="stylesheet" type="text/css" href="${ctx}/js/plugins/webuploader/webuploader.css">

<!-- 全局js -->
<script src="${ctx}/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx}/js/bootstrap.min.js?v=3.3.6"></script>

<!-- 自定义js -->
<script src="${ctx}/js/content.js?v=1.0.0"></script>
<script src="${ctx}/task/AddDelayTask.js"></script>

<!-- iCheck -->
<script src="${ctx}/js/plugins/iCheck/icheck.min.js"></script>

<!-- 引入日历插件js文件 -->
<script src="${ctx}/js/plugins/layer/laydate/laydate.js"></script>

<!-- 引入 Jquery.validate.js 表单验证框架 -->
<script src="${ctx}/js/jquery.validate.min.js"></script>
<script src="${ctx}/js/messages_zh.min.js"></script>

<!-- 引入弹框插件 layer  -->
<script src="${ctx}/js/plugins/layer/layer.min.js"></script>

<!--引入webuploader JS-->
 <script src="${ctx}/js/plugins/webuploader/webuploader.js"></script>

<style type="text/css">
	.msgErrorStyle {
		background: red;
		font-size: 20px;
	}
</style>

<script>
jQuery(function() {

    var $ = jQuery,
        $list = $('#fileList'), // thelist节点中添加文本  身份证正面  div添加  
        $btn = $('#fileSubmit'), // 文件上传按钮   身份证正面 文件上传按钮
        state = 'pending',
        uploader;

    uploader = WebUploader.create({
        resize: false,
        server: "${ctx}/FileUpload.oa",
        pick: '#filePicker' ,
        accept: {
            title: 'Images',
            extensions: 'jpg,jpeg,bmp,png,gif',
            mimeTypes: 'image/jpg,image/jpeg,image/png,image/bmp,image/gif'
        },
        thumb: {  
            allowMagnify: false,  
            crop: true  
        },  
        fileNumLimit: 1,
        fileSingleSizeLimit: 1024 * 1024,
        duplicate: true
    });

    uploader.on( 'fileQueued', function( file ) {
        $list.append( '<div id="' + file.id + '" class="item"><h4 class="info">' + file.name + '</h4><p class="state">等待上传...</p> </div>');
    });

    uploader.on( 'uploadProgress', function( file, percentage ) {
        var $li = $( '#'+file.id ),
            $percent = $li.find('.progress .progress-bar');

        if ( !$percent.length ) {
            $percent = $('<div class="progress progress-striped active">' +
              '<div class="progress-bar" role="progressbar" style="width: 0%"></div></div>').appendTo( $li ).find('.progress-bar');
        }

        $li.find('p.state').text('上传中');
        $percent.css( 'width', percentage * 100 + '%' );
    });

    uploader.on( 'uploadSuccess', function(file, response) {
    	if (response.code == 1) {
    		var idcard_url = response.msg;
        	$("#idcard_id").append("<br><img src='${ctx}"+idcard_url+"' style='width: 150px;height: 150px' />");
        	$("#annex").val(idcard_url);
        	$( '#'+file.id ).find('p.state').text('已上传');
        	$( '#'+file.id ).find('p.state').css("color","green");
    	} else if (response.code == 0) {
        	$( '#'+file.id ).find('p.state').text(response.msg);
        	$( '#'+file.id ).find('p.state').css("color","red");
    	}     	
    });

    uploader.on( 'uploadError', function( file ) {
        $( '#'+file.id ).find('p.state').text('上传出错');
        $( '#'+file.id ).find('p.state').css("color","red");
    });

    uploader.on( 'uploadComplete', function( file ) {
        $( '#'+file.id ).find('.progress').fadeOut();
    });

    uploader.on( 'all', function( type ) {
        if ( type === 'startUpload' ) {
            state = 'uploading';
        } else if ( type === 'stopUpload' ) {
            state = 'paused';
        } else if ( type === 'uploadFinished' ) {
            state = 'done';
        }
        if ( state === 'uploading' ) {
            $btn.text('暂停上传');
        } else {
            $btn.text('开始上传');
        }
    });

    uploader.on("error",function(type){
    	alert(type);
    	if(type == "F_EXCEED_SIZE"){
    		layer.alert('最大只能上传1M文件', {
    			  skin: 'layui-layer-molv' 
    		});
    	}
    	uploader.removeFile(uploader.getFile(file.id));
    });

    $btn.on( 'click', function() {
        if ( state === 'uploading' ) {
            uploader.stop();
        } else {
            uploader.upload();
        }
    });

});
</script>

</head>

<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight">
		<div class="row">
			<div class="col-sm-8">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h5>申请延期</h5>
						<div class="ibox-tools">
							<a class="collapse-link"> <i class="fa fa-chevron-up"></i>
							</a> <a class="dropdown-toggle" data-toggle="dropdown"
								href="form_basic.html#"> <i class="fa fa-wrench"></i>
							</a>
							<ul class="dropdown-menu dropdown-user">
								<li><a href="form_basic.html#">选项1</a></li>
								<li><a href="form_basic.html#">选项2</a></li>
							</ul>
							<a class="close-link"> <i class="fa fa-times"></i>
							</a>
						</div>
					</div>
					<div class="ibox-content">
						<form class="form-horizontal" action="" method="post" id="regForm" enctype="multipart/form-data">
						
							<div class="form-group" style="display:none">
								<label class="col-sm-3 control-label">任务id：</label>
								<div class="col-sm-3">
									<span class="help-block m-b-none" id="taskId" name="taskId">${task.taskId}</span>
								</div>
							</div>
				
							<div class="form-group" >
								<label class="col-sm-3 control-label">任务标题：</label>
								<div class="col-sm-3">
									<span class="help-block m-b-none" id="taskTitle">${task.taskTitle}</span>
								</div>
							</div>
							
							<div class="form-group">
								<label class="col-sm-3 control-label">任务内容：</label>
								<div class="col-sm-3">
									<span class="help-block m-b-none" id="taskContent">${task.taskContent}</span>
								</div>
							</div>
							
							<div class="form-group">
								<label class="col-sm-3 control-label">任务截止日期：</label>
								<div class="col-sm-3">
									<span class="help-block m-b-none" id="endTime">${task.endTime}</span>
								</div>
							</div>
							
							<div class="form-group">
								<label class="col-sm-3 control-label">申请人：</label>
								<div class="col-sm-3">
									<input type="text" id="delayClerk" name="delayClerk" class="form-control">
								</div>
							</div>
							
							<div class="form-group">
								<label class="col-sm-3 control-label">申请日期：</label>
								<div class="col-sm-3">
									<input type="text" id="applyTime" name="applyTime" class="laydate-icon form-control layer-date" onclick="laydate({elem: '#applyTime'});">
								</div>
								<label class="col-sm-3 control-label"></label>
								<div class="col-sm-3">
									<span id="regTable"></span>
								</div>
							</div>

							<div class="form-group">
								<label class="col-sm-3 control-label">延期原因：</label>
								<div class="col-sm-3">
									<input type="text" id="applyReason" name="applyReason" class="form-control">
								</div>
							</div>

							<div class="form-group">
								<label class="col-sm-3 control-label">延期到（日期）：</label>
								<div class="col-sm-3">
									<input type="text" id="postTime" name="postTime" class="laydate-icon form-control layer-date" onclick="laydate({elem: '#postTime'});">
								</div>
								<label class="col-sm-3 control-label"></label>
								<div class="col-sm-3">
									<span id="regTable"></span>
								</div>
							</div>
							
							<div class="form-group">
	      					    <label class="col-sm-3 control-label">其他附件(选填)</label>
	      					    <div class="col-sm-7">
									<div id="uploader" class="wu-example">
									    <div id="fileList" class="uploader-list"></div>
									    <div class="btns" id="idcard_id">
									        <div id="filePicker">选择文件</div>
									        <button id="fileSubmit" type="button" class="btn btn-default">开始上传</button>
									    </div>
									</div>
									<input type="hidden" id="annex" name="annex" />
							   </div>
   							</div>
						
							<div class="form-group">
								<div class="col-sm-offset-3 col-sm-8">
									<button id="submit" class="btn btn-sm btn-primary" type="submit">确认申请</button>
									<button class="btn btn-sm " type="reset">重置</button>
									<button class="btn btn-sm btn-warning" type="reset" onclick="javascript:window.history.go(-1)">取消返回</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>


	</div>


</body>

</html>
